<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card class="box-card">
            <div class="teamTopTip">
                <el-icon color="#252B3A" size="16px"><Warning /></el-icon>
                <div class="tipbox">
                    <div class="tiptitle">温馨提示</div>
                    <div class="tipitem">“我的资源”包括您的原始资源及服务、购买的资源及服务</div>
                    <div class="tipitem">新增，更新，删除资源有一定时间的数据延迟，请稍候查看。</div>
                </div>
            </div>
        </el-card>
        <el-card class="teamBox">
            <template #header>
                <div class="serchbox">
                    <div class="left">
                        <div class="item">
                            <el-input v-model="input" class="serchs" placeholder="搜索土地资源">
                                <template #suffix>
                                    <el-icon class="el-input__icon"><search /></el-icon>
                                </template>
                            </el-input>
                        </div>
                        <el-button type="primary" text bg>搜索</el-button>
                        <span>*搜索范围：地块编号、土地资源名称</span>
                    </div>
                    <el-button type="primary" text bg @click="topages('/landresource/landsourcedetails?type=1')">新增土地资源</el-button>
                </div>
            </template>
            <el-table :data="[{}]" class="tableheader" style="width: 100%">
                <el-table-column prop="date" label="序号"></el-table-column>
                <el-table-column prop="createTime" label="土地资源名称" />
                <el-table-column prop="companyName" label="土地资源名字" />
                <el-table-column prop="createUserName" label="土地资源类型" />
                <el-table-column prop="companyNature" label="土地资源所有形式" />
                <el-table-column prop="address" label="电子围栏面积">
                    <template #default="scope"> 暂无数据 </template>
                </el-table-column>
                <el-table-column prop="companyNature" label="地块位置" />
                <el-table-column prop="address" label="操作" width="230">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="topages('/landresource/landsourcedetails?type=2')">查看</el-button>
                        <el-button link type="primary" size="small">修改</el-button>
                        <el-button link type="primary" size="small" @click="topages('/landresource/landsourcedetails?type=3')">电子围栏</el-button>
                        <el-button link type="primary" size="small" @click="deleteitem(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :totalNum="pageData.total" @paginaClick="paginaClick"></pagination>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
// import { companyList } from "@/api/team";
const router = useRouter();
const pageData: any = reactive({
    records: [],
    total: 0,
});
const queryData = reactive({
    companyName: "",
    checkState: "",
    startTime: "",
    endTime: "",
    page: 1,
    size: 10,
});
const input: any = [];
const checked: boolean = false;
const getCompanyList = (type: number) => {
    // type = 0 时为条件查询
    if (type) {
        queryData.companyName = "";
        queryData.checkState = "";
        queryData.startTime = "";
        queryData.endTime = "";
        queryData.page = 1;
    }
    // companyList(queryData).then((res: any) => {
    //     if (res.code == 200) {
    //         // pageData.records = res.data.records;
    //         pageData.total = res.data.total;
    //     }
    // });
};

getCompanyList(1);
// 分页
const paginaClick = (val: number) => {
    queryData.page = val;
    getCompanyList(0);
};
const topages = (url: string) => {
    router.push(url);
};
import { ElMessageBox, ElMessage } from "element-plus";
const deleteitem = (row: any) => {
    ElMessageBox.confirm("是否删除该条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        ElMessage({
            type: "success",
            message: "操作成功",
        });
    });
};
</script>
<style lang="scss" scoped>
.teamTopTip {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .tipbox {
        margin-left: 10px;
        .tiptitle {
            font-size: 14px;
            // font-weight: bold;
            color: #333333;
        }
        .tipitem {
            margin-top: 10px;
            font-size: 14px;
            color: #333333;
            button {
                margin-top: -4px;
            }
        }
    }
}
.teamBox {
    margin-top: 20px;
    // padding: 30px 0;
    background-color: #ffffff;
    .teamtop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .topitems {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .searchInput {
            width: 400px;
            margin-right: 15px;
        }
        .searchBtn {
            width: 80px;
            height: 32px;
            background: #f1f1f1;
            border-radius: 4px;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
            color: #333333;
            cursor: pointer;
        }
        .rightBtn {
            height: 32px;
            background: #f1f1f1;
            border-radius: 4px;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
            color: #333333;
            cursor: pointer;
            width: 100px;
            margin-left: 10px;
        }
    }
    .searchTip {
        font-size: 12px;
        color: #999999;
        margin-top: 10px;
        margin-bottom: 30px;
    }
}
.tableTip {
    font-size: 12px;
    color: #999999;
    margin-top: 10px;
}
.serchbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .item {
            margin-right: 20px;
            color: #333333;
            font-size: 14px;
            .serchs {
                width: 300px;
            }
        }
        span {
            color: #999999;
            font-size: 14px;
            margin-left: 10px;
        }
    }
}
</style>
